﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
        <script src="../build/nv.d3.js"></script>
        <script src="lib/stream_layers.js"></script>
        <style>
            text
            {
                font: 12px sans-serif;
            }
        
            svg
            {
                display: block;
                float: left;
                height: 350px !important;
                width: 350px !important;
            }
        
            html, body
            {
                margin: 0px;
                padding: 0px;
                height: 100%;
                width: 100%;
            }
        
            .nvd3.nv-pie.nv-chart-donut2 .nv-pie-title
            {
                fill: gray;
            }
        
            .nvd3.nv-pie.nv-chart-donut1 .nv-pie-title
            {
                opacity: 0.4;
                fill: green;
            }
        </style>
    </head>
    
    <body class='with-3d-shadow with-transitions'>
    <svg id="test1" class="mypiechart"></svg>
    <svg id="test2" class="mypiechart"></svg>
    <svg id="test3" class="mypiechart"></svg>
    <script>

        var testdata1 = [
        { key: "Updated", y: 0 },
        { key: "Pending", y: 100 }
    ];

        var arcRadius1 = [
		{ inner: 0.6, outer: 1 },
		{ inner: 0.65, outer: 0.95 }
	];

        var colors = ["green", "gray"];

        var testdata2 = [
        { key: "One", y: 1 },
        { key: "Two", y: 1 },
        { key: "Three", y: 1 },
        { key: "Four", y: 1 },
        { key: "Five", y: 1 },
        { key: "Six", y: 1 },
        { key: "Seven", y: 1 }
    ];

        var arcRadius2 = [
		{ inner: 0.9, outer: 1 },
		{ inner: 0.8, outer: 1 },
		{ inner: 0.7, outer: 1 },
		{ inner: 0.6, outer: 1 },
		{ inner: 0.5, outer: 1 },
		{ inner: 0.4, outer: 1 },
		{ inner: 0.3, outer: 1 }
	];

        var testdata3 = [
        { key: "Updated", y: 80 },
        { key: "Pending", y: 20 }
    ];

        var arcRadius3 = [
		{ inner: 0, outer: 1 },
		{ inner: 0, outer: 0.8 }
	];

        var height = 350;
        var width = 350;

        nv.addGraph(function () {
            var chart = nv.models.pieChart()
            .x(function (d) { return d.key })
            .y(function (d) { return d.y })
            .donut(true)
			.showLabels(false)
			.color(colors)
            .width(width)
            .height(height)
			.growOnHover(false)
			.arcsRadius(arcRadius1)
            .id('donut1'); // allow custom CSS for this one svg

            chart.title("0%");

            d3.select("#test1")
            .datum(testdata1)
            .transition().duration(1200)
            .attr('width', width)
            .attr('height', height)
            .call(chart);

            // update chart data values randomly
            setInterval(function () {
                if (testdata1[0].y < 100) {
                    testdata1[0].y = testdata1[0].y + 1;
                    testdata1[1].y = testdata1[1].y - 1;
                }
                else {
                    testdata1[0].y = 0;
                    testdata1[1].y = 100;
                }
                chart.title(testdata1[0].y + "%");
                chart.update();
            }, 4000);

            return chart;

        });

        nv.addGraph(function () {
            var chart = nv.models.pieChart()
            .x(function (d) { return d.key })
            .y(function (d) { return d.y })
            .donut(true)
            .width(width)
            .height(height)
			.arcsRadius(arcRadius2)
			.donutLabelsOutside(true)
			.labelSunbeamLayout(true)
            .id('donut2'); // allow custom CSS for this one svg

            d3.select("#test2")
            .datum(testdata2)
            .transition().duration(1200)
            .attr('width', width)
            .attr('height', height)
            .call(chart);

            return chart;

        });

        nv.addGraph(function () {
            var chart = nv.models.pieChart()
            .x(function (d) { return d.key })
            .y(function (d) { return d.y })
            .donut(true)
			.showLabels(true)
            .width(width)
            .height(height)
			.arcsRadius(arcRadius3)
			.donutLabelsOutside(true)
            .id('donut3'); // allow custom CSS for this one svg

            d3.select("#test3")
            .datum(testdata3)
            .transition().duration(1200)
            .attr('width', width)
            .attr('height', height)
            .call(chart);

            return chart;

        });
    </script>
</body>
</html>
